<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Pablo Arroyo">
    <link rel="shortcut icon" href="images/ico/favicon.ico">

    <title>Pagos 1.0</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://edge.quantserve.com/quant.js" async="" type="text/javascript"></script>
  <script>

$('#myModal').on('shown.bs.modal', function () {
 
    var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==500) {
      
        // complete
      alert("chau");
        clearInterval(progress);
        $('.progress').removeClass('active');
        $('#myModal').modal('hide');
        $bar.width(0);
        
    } else {
      
        // perform processing logic here
      alert("hola");
        $bar.width($bar.width()+50);
    }
    
    $bar.text($bar.width()/5 + "%");
	}, 800);
  
  
})

</script>
  <script src="dist/js/jquery-1.11.0.min.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>
  <script src="http://edge.quantserve.com/quant.js" async="" type="text/javascript"></script>
  </head>
  

<body>

<div class="container">
  <h1>Please Wait Modal Example</h1>
  <p>Click button to run demo..</p>
  <a href="#PabloCapo" role="button" class="btn btn-primary" data-toggle="modal">Submit</a>
</div>
  
<!-- Modal -->
<div class="modal fade" id="PabloCapo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Cargando...</h4>
      </div>
      <div class="modal-body center-block">
      <div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span class="sr-only">100% Complete</span>
  </div>
</div>
        <!--<div class="progress">
          <div class="progress-bar bar" role="progressbar" width="500" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
          </div>-->
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
  
  
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Please Wait</h4>
      </div>
      <div class="modal-body center-block">
        <div class="progress">
          <div class="progress-bar bar" role="progressbar" width="500" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-header">
            <h1>Processing...</h1>
        </div>
        <div class="modal-body">
            <div class="progress progress-striped active">
                <div class="bar" style="width: 100%;"></div>
            </div>
        </div>
    </div>


</body>
</html>